<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>浮动</title>
    <style>
    #head {
        border: 1px #CCC solid;
        width: 410px;
        height: 100px;
        margin-bottom: 10px;
        text-align: center;
        line-height: 100px;
    }

    #main {
        border: 1px #CCC solid;
        width: 400px;
        height: 200px;
        margin-bottom: 10px;
        padding: 5px;
        text-align: center;
    }

    #left {
        width: 100px;
    }

    #center {
        width: 184px;
        margin-left: 5px;
    }

    #right {
        width: 100px;
        margin-left: 5px;
    }

    #left,
    #center,
    #right {
        border: 1px #CCC solid;
        line-height: 198px;
        height: 198px;
        float: right;
    }

    .footer {
        border: 1px #CCC solid;
        width: 410px;
        height: 50px;
        margin-bottom: 10px;
        text-align: center;
        line-height: 50px;
    }
    </style>
</head>

<body>
    <div id="head">头部</div>
    <div id="main">
        <div id="left">左侧</div>
        <div id="center">中间</div>
        <div id="right">右侧</div>
    </div>
    <div class="footer">底部</div>
</body>

</html>